<!--计划制定页面-->
<template>

  <div style="margin:20px;padding:20px">
    <el-row class="el-row">
      <el-col :span="8" style="margin:10px">
        <el-card
          class="el-card"
          style="display:flex;
                 justify-content: center;
                 align-items: center;
                 float:left;">
          <div slot="header" class="clearfix">
            <span>我的单词书</span>
          </div>
          <el-avatar shape="square" :size="180" :src="HeadImg" style="width:100%;height: auto;"></el-avatar>
        </el-card>
      </el-col>

      <el-col :span="14" style="margin:10px;">
        <el-card class="el-card">
          <span>换本词书</span>
          <el-carousel :interval="4000" type="card" height="180px" style="margin:10px">
            <el-carousel-item v-for="item in imgList" :key="item.id">
              <img :src="item.idView" class="image" style="width:100%;height: auto;">
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="el-row">
      <el-col :span="8" style="margin:10px">
        <el-card
          class="el-card"
          style="display:flex;
                 justify-content: center;
                 align-items: center;
                 float:left;">
          <div slot="header" class="clearfix">
            <span>我的计划</span>
          </div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="选择词书">
            <el-select v-model="form.book" placeholder="请选择">
              <el-option label="cet4" value="cet4"></el-option>
              <el-option label="cet6" value="cet6"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="每天学习">
              <el-input-number v-model="form.reciteWordNub" controls-position="right" @change="handleChange" :min="1" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label="每天复习">
              <el-input-number v-model="form.reviewWordNub" controls-position="right" @change="handleChange" :min="1" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label="计划天数">
              <el-input-number v-model="form.days" controls-position="right" @change="handleChange" :min="1" :max="300"></el-input-number>
            </el-form-item>
            <el-button type="primary" round @click="changePlan">修改计划</el-button>
          </el-form>
        </el-card>
      </el-col>

      <el-col :span="14" style="margin:10px;">
        <el-card class="el-card">
          <span>累计学习</span>
          <el-row class="el-row" style="margin: 10px">
            <el-col :span="12" style="width: 100px;
                                      height: 100px;
                                      margin: 0 auto;
                                      text-align:center">
            <div style="width: 100px;">
              <h1>单词</h1>
              <h2 style="color: limegreen;font-size:35px">430</h2>
            </div>
            </el-col>
            <el-col :span="12" style="width: 100px;
                                      height: 100px;
                                      margin: 0 auto;
                                      text-align:center">
            <div style="width: 100px;">
              <h1>天数</h1>
              <h2 style="color: limegreen;font-size:35px">100</h2>
            </div>
            </el-col>

          </el-row>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {post} from "../common/serviceUtil";

export default {

  name: "Plan",
  data() {
    return {
      imgList: [
        {id:0,idView:'../../static/image/4j.png'},
        {id:1,idView:'../../static/image/6j.png'},
        {id:2,idView:'../../static/image/4z.png'},
        {id:3,idView:'../../static/image/8z.png'}
      ],

      HeadImg: '../../static/image/4jj.png',
      form: {
        book:'',
        reciteWordNub : '',
        reviewWordNub: '',
        days: '',
      }
    }
  },
  //钩子函数mounted 在加载页面时触发get函数getPlan()
  mounted:function(){
    this.getPlan();
  },

  methods: {
    //计划数字增减
    handleChange(value) {
      console.log(value);
    },
    //计划修改
    changePlan: function () {
      // console.log('submit!');
      // console.log(this.form.Days);
      var that = this;
        post("/changePlan",this.form)
        .then(function (response) {
          if(response.data.status===1) {

          that.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          });
          }else if(response.data.status===0) {
            alert("改不了改不了")
          }
        })
        .catch(function (err) {
          that.$message({
            showClose: true,
            message: '修改失败',
            type: 'error'
          });
        })
    },
    //获取计划
    getPlan(){
      var that = this;
      axios.get("/getPlan")
        .then(function(response){
          that.form.reciteWordNub = response.data.data.reciteWordNub
          that.form.reviewWordNub = response.data.data.reviewWordNub
          that.form.Days = response.data.data.Days
      });
    },

  },
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap
}

.el-card {
  min-width: 100%;
  height: 100%;

}
</style>
